NOTE : The following examples are provided with screenshots of the resulting document.

Consider the following document.

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
</HEAD>
<BODY>
<P>The HTML Reference Library is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P>For more information about the HTMLib, contact <A HREF="mailto:cmlehunt@swan.ac.uk">cmlehunt@swan.ac.uk</A>
</BODY>
</HTML>

Style Sheet example number 1

As above, it appears dull and lifeless. The first simple thing that can be done with it is to use some different fonts for the sections of the page. For example :

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
P.main {font-family : Arial;
font-size : 12pt}
P.info { font-family : Arial;
font-style : italic}
</STYLE>
</HEAD>
<BODY>
<P CLASS="main">The HTML Reference Library is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P CLASS="info">For more information about the HTMLib, contact <A HREF="mailto:cmlehunt@swan.ac.uk">cmlehunt@swan.ac.uk</A>
</BODY>
</HTML>

note the use of CLASS selectors to separate the different paragraphs and the way that the unordered list inherits the style attached to the previous paragraph.

Style Sheet example number 2

This looks slightly more appealing, but would be better perhaps with some colour and highlighting of the link text and HTMLib references (note the way the highlighting, using the <SPAN> element inherits the colour of the paragraph in which it resides) :

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
</STYLE>
</HEAD>
<BODY>
<P CLASS="main">The <SPAN>HTML Reference Library</SPAN> is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="mailto:cmlehunt@swan.ac.uk">cmlehunt@swan.ac.uk</A>
</BODY>
</HTML>

Style Sheet example number 3

The nest step in enhancing the presentation of the document is to force some aesthetically grand text over-lay effects. Adding the text and highlight CLASS descriptions into the style sheet definition defines two styles. By using the negative top-margin property in the highlight class, text specified as using this class can be over-laid on other text.

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
.text { color: red;
margin-left: 10px;
font-size: 28px;
font-family: Arial Black }
.highlight { margin-top: -38px;
margin-left: 8px;
color: darkred;
font-size: 28px;
font-family: Arial Black }
</STYLE>
</HEAD>
<BODY>
<P CLASS="main"><DIV CLASS="text" STYLE="{color : white; font-style : italic}">The HTML Reference Library</DIV>
<DIV CLASS="highlight" STYLE="{color : gray; font-style : italic}">The HTML Reference Library</DIV>
<P CLASS="main">is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI><DIV CLASS="text">Windows 3.x</DIV>
<DIV CLASS="highlight">Windows 3.x</DIV>
<LI><DIV CLASS="text" STYLE="{color : blue"}>Windows 95/NT</DIV>
<DIV CLASS="highlight" STYLE="{color : darkblue"}>Windows 95/NT</DIV>
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="mailto:cmlehunt@swan.ac.uk">cmlehunt@swan.ac.uk</A>
</BODY>
</HTML>

Style Sheet example number 4

Also note how the text and highlight class descriptions can have certain properties altered within the <DIV> element, by using the STYLE attribute. This means that the style can be described once and then have colours attached to it at the text level, rather than specifying new classes for the different coloured sections.

NOTE : The above is a (very) simple example of how a page can be transformed easily, using style sheet definitions in the <STYLE> elements in the <HEAD> of the document. Using style sheets makes changing the appearance of a page much easier as it no longer becomes necessary to dig through pages altering separate colouring attributes. This can be especially useful, if the style sheet is used externally to the documents and <LINK>ed to.

Properties and Values Style Sheets Overview